<template>
	<view class="b_con">
		<view class="b_ele" :style="{ 'border-color': bColor }">
			<view v-if="bElement >= 10" :style="{ 'background-color': bColor }" class="b_ele_item" style="border-radius: 4rpx 0 0 4rpx"></view>
			<view v-if="bElement >= 40" :style="{ 'background-color': bColor }" class="b_ele_item"></view>
			<view v-if="bElement >= 70" :style="{ 'background-color': bColor }" class="b_ele_item"></view>
			<view v-if="bElement >= 100" :style="{ 'background-color': bColor }" class="b_ele_item" style="border-radius: 0 4rpx 4rpx 0; margin-right: 0"></view>
		</view>
		<view class="b_tou" :style="{ 'background-color': bColor }"></view>
		<view class="b_num" :style="{ color: bColor }">{{ bElement }}%</view>
	</view>
</template>

<script>
export default {
	props: {
		num: {
			type: Number,
			default: 100
		}
	},
	data() {
		return {
			bColor: '#909399',
			bElement: 100
		};
	},
	watch: {
		num: {
			handler(newValue) {
				this.setPower(newValue);
			},
			deep: true
		}
	},
	mounted() {
		this.bElement = this.num;
	},
	methods: {
		setPower(e) {
			this.bElement = e;
			if (e <= 10) {
				this.bColor = '#e43d33';
			} else {
				this.bColor = '#909399';
			}
		}
	}
};
</script>

<style lang="scss">
.b_con {
	display: flex;
	align-items: center;
	.b_ele {
		border-radius: 6rpx;
		width: 30rpx;
		height: 20rpx;
		border: 3rpx solid;
		box-sizing: border-box;
		padding: 1rpx;
		display: flex;
		position: relative;
		.b_ele_item {
			width: 4rpx;
			height: 100%;
			margin-right: 1rpx;
			box-sizing: border-box;
		}
	}
	.b_tou {
		width: 3rpx;
		height: 12rpx;
		border-radius: 0 8rpx 8rpx 0;
	}
	.b_num {
		font-size: 24rpx;
		margin-left: 10rpx;
	}
}
</style>
